<template>
	<view class="order-list" style="padding-top: 20rpx;">



		<view class="tips-list-box">
			<view class="box-border">
				<view class="tips-text" style="margin-bottom: 20rpx ;">
					仅显示30个订单信息
				</view>
			</view>
		</view>
		<ticket-list :orderList="orderList"></ticket-list>



		<view class="cinema-phone" @click="call">
			热线客服
		</view>
		<view class="cinema-phone" style="bottom: 200rpx;" @click="toGoods">
			卖品订单
		</view>
	</view>
</template>

<script>
	import TicketList from '../../components/orderList/TicketList.vue'
	import {
		quertTicketList
	} from '../../common/http/api.js'
	export default {
		components: {
			TicketList,

		},
		data() {
			return {
				quertTicketList: {
					openId: uni.getStorageSync("openId"),
					pageNo: 1,
					pageSize: 50
				},
				orderList: [],
				current: 0,
				tabList: [{
					name: '影票',
				}, {
					name: '卖品',
				}]
			};
		},
		methods: {
			call() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('cinemaPhone'),
					fail: e => {
						console.log(e);
					}
				})
			},
			toGoods() {
				uni.navigateTo({
					url: '../goodsOrderList/goodsOrderList'
				})
			},
			getList() {
				//
				uni.showLoading({
					title: "加载中"
				})
				quertTicketList(this.quertTicketList).then(res => {
					const {
						data,
						page
					} = res

					if (this.orderList.length == 0) {
						this.orderList = data
					} else {
						this.orderList.push(...data)
					}
					this.total = page.totalSize
					uni.hideLoading()
				})
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
			this.getList()
		},
		onReachBottom() {
			if (this.total == this.orderList.length) return
			this.quertTicketList.pageNo += 1
			this.getList()
		}
	}
</script>

<style lang="scss">
	.order-list {
		height: 100vh;
		background-color: #f0f0f5;
	}

	.tips-text {
		text-align: center;
		color: royalblue;
		font-size: 24rpx;

	}

	.cinema-phone {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: royalblue;
		color: #fff;
		position: fixed;
		right: 40rpx;
		font-size: 36rpx;
		bottom: 80rpx;
		text-align: center;
		padding: 10rpx;
	}

	.tips-list-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;

		.box-border {
			padding: 30rpx;
			border: 1px solid royalblue;
			border-radius: 10rpx;
		}
	}
</style>